<template>
  <div>
    <header class="header">
      <van-icon class="left" name="add" v-if="showLeft"/>
      <slot name="left"></slot>
      <div class="middle" :style="`width:${width} !important;`">
        <van-icon class="search-icon" name="search" />
        <input type="text" placeholder="搜索关键字" v-model="search" @change.stop="$emit('change',search)"/>
      </div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  props:{
    showLeft:{
      type:Boolean,
      default:true
    },
    width:{
      type:String,
      default:"2.26rem"
    },
    kw:{
      type:String,
      default:""
    }
  },
  watch:{
    kw(val){
      this.search = val;
    }
  },
  data: () => {
    return {
      search: "",
    };
  },
};
</script>

<style lang='scss' scoped>
.header {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.55rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--bgc-white);
  z-index: 1000;
  .left {
    margin-left: 0.16rem;
    position: relative;
    color: var(--text-icon-yellow);
    font-size: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    &::after {
      content: "";
      width: 50%;
      height: 50%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: var(--black);
      z-index: -1;
    }
  }
  .middle {
    position: relative;
    margin-left: 0.1rem;
    width: 2.26rem;
    height: 0.4rem;
    > input {
      background-color: var(--bgc-gray);
      border: none;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      text-indent: 0.3rem;
    }
    .search-icon {
      position: absolute;
      left: 0.1rem;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 0.15rem;
      height: 0.15rem;
      font-size: 0.15rem;
      color: var(--text-gray2);
    }
  }
  .right {
    flex-grow: 1;
    display: flex;
    height: 100%;
    > div {
      width: 0.21rem;
      height: 0.22rem;
      margin-left: 0.18rem;
    }
  }
}
</style>